<template>
  <div class="home">
    <!-- Hero Section -->
    <div class="hero-section">
      <div class="hero-background">
        <el-carousel height="100%" indicator-position="outside" arrow="always" :autoplay="true" :interval="5000" :key="firstImagesKey">
          <el-carousel-item v-for="(img, idx) in firstImages" :key="idx">
            <img :src="img" alt="日本工作机会" class="hero-bg-image" @click="handleHeroImageClick(idx, img)" style="cursor: pointer;" />
          </el-carousel-item>
        </el-carousel>
        <div class="hero-overlay"></div>
      </div>
      <div class="hero-content">
        <div class="container">
          <h1 class="hero-title">{{ $t('home.hero.title') }}</h1>
          <p class="hero-subtitle">{{ $t('home.hero.subtitle') }}</p>
          <div class="hero-buttons">
            <el-button type="primary" size="large" @click="$router.push('/materials')">
              {{ $t('home.hero.downloadMaterials') }}
            </el-button>
            <el-button size="large" @click="$router.push('/videos')">
              {{ $t('home.hero.watchVideos') }}
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 考试类型 Section -->
    <div class="exam-types-section">
      <div class="container">
        <div class="section-header">
          <h2>{{ $t('home.examTypes.title') }}</h2>
          <p>{{ $t('home.examTypes.subtitle') }}</p>
        </div>
        
        <div class="exam-types-grid">
          <div 
            v-for="exam in examTypes" 
            :key="exam.id" 
            class="exam-type-card"
            @click="scrollToSection(exam.id)"
          >
            <!--<div class="exam-icon">-->
              <!--<img :src="exam.icon" :alt="exam.title" />-->
            <!--</div>-->
            <h3>{{ exam.name }}</h3>
            <p>{{ exam.description }}</p>
            <!--<div class="exam-stats">-->
              <!--<span class="stat">-->
                <!--<el-icon><User /></el-icon>-->
                <!--{{ exam.students }}+ {{ $t('home.examTypes.students') }}-->
              <!--</span>-->
              <!--<span class="stat">-->
                <!--<el-icon><Trophy /></el-icon>-->
                <!--{{ exam.successRate }}% {{ $t('home.examTypes.successRate') }}-->
              <!--</span>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据 Section -->
    <div class="stats-section">
      <div class="stats-background">
        <img :src=" imageObj?.threeUrl ? resolveUrl(imageObj?.threeUrl) :'/src/assets/index/study.png'"  alt="统计数据背景" class="stats-bg-image" />
        <div class="stats-overlay"></div>
      </div>
      <div class="container">
        <div class="stats-grid">
          <div v-for="(stat,idx) in stats" :key="stat.id" class="stat-item">
            <div class="stat-icon">
              <img :src=" stat.icon" :alt="stat.title" />
            </div>
            <div class="stat-content">
              <h3 class="stat-number">{{ stat.number }}+</h3>
              <p class="stat-title">{{ stat.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 特色功能 Section -->
    <div class="features-section">
      <div class="container">
        <div class="section-header">
          <h2>{{ $t('home.features.title') }}</h2>
          <p>{{ $t('home.features.subtitle') }}</p>
        </div>
        
        <div class="features-grid">
          <div v-for="(feature,idx) in features" :key="feature.id" class="feature-card">
            <div class="feature-image">
              <img :src="imageObj?.twoUrl ? changeUrl(imageObj?.twoUrl,idx) : feature.image" :alt="feature.title" />
            </div>
            <div class="feature-content">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 成功案例 Section -->
    <div class="success-stories-section">
      <div class="container">
        <div class="section-header">
          <h2>{{ $t('home.successStories.title') }}</h2>
          <p>{{ $t('home.successStories.subtitle') }}</p>
        </div>
        
        <div class="stories-grid">
          <div v-for="story in successStories" :key="story.id" class="story-card">
            <div class="story-image">
              <img :src="story.image" :alt="story.name" />
            </div>
            <div class="story-content">
              <h4>{{ story.name }}</h4>
              <p class="story-position">{{ story.position }}</p>
              <p class="story-quote">{{ story.quote }}</p>
              <div class="story-achievement">
                <el-tag type="success">{{ story.achievement }}</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { User, Trophy } from '@element-plus/icons-vue'
import {
  examstypeList,getExamstypeDetail,
} from '@/api/system'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const imageObj = computed(() => userStore.imageObj)
const firstImages = computed(() => {
  const raw =  imageObj?.value?.firstUrl
  if (!raw) {
    return ['/src/assets/index/unnamed.png']
  }
  // 支持字符串数组或逗号分隔字符串
  let list = Array.isArray(raw) ? raw : String(raw).split(',')
  list = list.map(s => String(s).trim()).filter(Boolean)
  const resolved = list.map(url => {
    if (/^https?:\/\//i.test(url)) return url
    return (import.meta.env.VITE_BASE_URL || '') + url
  })
  return resolved.length ? resolved : ['/src/assets/index/unnamed.png']
})
const firstImagesKey = computed(() => firstImages.value.join('|'))
// 兼容相对地址
const resolveUrl =(url)=> {
  if (!url) return ''
  if (/^https?:\/\//i.test(url)) return url
  return (import.meta.env.VITE_BASE_URL || '') + url
}

const changeUrl = (str,idx)=> {
  if(str){
    let url = str.split(',').filter(url => url.trim())[idx]
    if (!url) return ''
    if (/^https?:\/\//i.test(url)) return url
    return (import.meta.env.VITE_BASE_URL || '') + url
  }
}

const handleHeroImageClick = (index, url) => {
  // 这里可以根据业务进行跳转或埋点
  // 先占位实现点击事件
  // console.log('clicked hero image:', index, url)
}


const { t } = useI18n()

// 考试类型数据
const examTypes = ref([
  {
    id: 'jft',
    name: 'JFT BASIC',
    description: '日本技术实习培训日语考试，通往特定技能签证的重要途径',
    icon: 'https://via.placeholder.com/80x80/409EFF/ffffff?text=JFT',
    students: 5000,
    successRate: 95
  },
  {
    id: 'tokutei',
    name: '特定技能',
    description: '特定技能考试，涵盖多个专业领域，为日本工作提供专业认证',
    icon: 'https://via.placeholder.com/80x80/67C23A/ffffff?text=特定技能',
    students: 3000,
    successRate: 92
  },
  {
    id: 'jlpt',
    name: 'JLPT',
    description: '日本语能力测试，国际认可的日语水平认证考试',
    icon: 'https://via.placeholder.com/80x80/E6A23C/ffffff?text=JLPT',
    students: 8000,
    successRate: 88
  },
  {
    id: 'interview',
    name: '面试培训',
    description: '专业的面试技巧培训，帮助您在日本求职中脱颖而出',
    icon: 'https://via.placeholder.com/80x80/F56C6C/ffffff?text=面试',
    students: 2000,
    successRate: 98
  }
])

// 统计数据
const stats = ref([
  {
    id: 1,
    number: 15000,
    title: '学员总数',
    icon: 'https://via.placeholder.com/60x60/409EFF/ffffff?text=学员'
  },
  {
    id: 2,
    number: 95,
    title: '通过率',
    icon: 'https://via.placeholder.com/60x60/67C23A/ffffff?text=通过率'
  },
  {
    id: 3,
    number: 500,
    title: '合作企业',
    icon: 'https://via.placeholder.com/60x60/E6A23C/ffffff?text=企业'
  },
  {
    id: 4,
    number: 10,
    title: '年经验',
    icon: 'https://via.placeholder.com/60x60/F56C6C/ffffff?text=经验'
  }
])

// 特色功能
const features = ref([
  {
    id: 1,
    title: '免费学习资料',
    description: '提供丰富的免费学习资料，包括教材、练习题和模拟考试',
    image: '/src/assets/index/test_print_mondaiyoushi.png'
  },
  {
    id: 2,
    title: '专业视频课程',
    description: '高质量的视频课程，由经验丰富的讲师精心制作',
    image: '/src/assets/index/online_school_girl.png'
  },
  {
    id: 3,
    title: '一对一指导',
    description: '提供个性化的学习指导和就业咨询服务',
    image: '/src/assets/index/business_hikitsugi.png'
  },
  {
    id: 4,
    title: '就业支持',
    description: '与日本企业合作，为学员提供就业机会和签证支持',
    image: '/src/assets/index/writing_man1_smile.png'
  }
])

// 成功案例
const successStories = ref([
  {
    id: 1,
    name: '陈小明',
    position: '食品加工技术员',
    quote: '通过平台的学习，我成功通过了特定技能考试，现在在日本工作很顺利。',
    achievement: '特定技能签证',
    image: 'https://via.placeholder.com/80x80/409EFF/ffffff?text=陈'
  },
  {
    id: 2,
    name: '李小红',
    position: '护理服务人员',
    quote: '平台提供的资料和指导非常实用，帮助我快速适应了日本的工作环境。',
    achievement: '护理特定技能',
    image: 'https://via.placeholder.com/80x80/67C23A/ffffff?text=李'
  },
  {
    id: 3,
    name: '王大力',
    position: '餐饮服务经理',
    quote: '从零基础到成功就业，平台给了我很大的帮助和支持。',
    achievement: '餐饮特定技能',
    image: 'https://via.placeholder.com/80x80/E6A23C/ffffff?text=王'
  }
])


// 获取考试类型
const fetchLists = async () => {
  try {
    const params = {
      pageNum: 1,
      pageSize: 100,
    }

    const response = await examstypeList(params)
    if (response.code === 200) {
      examTypes.value = response.rows || []
    } else {
    }
  } catch (error) {
    console.error('获取考试类型列表失败:', error)
  } finally {
  }
}

// 获取考试类型详情
const fetchDetail = async (id) => {
  try {
    const response = await getExamstypeDetail(id)
    if (response.code === 200) {
      return response.data
    } else {
      ElMessage.error(response.msg || '获取考试类型详情失败')
      return null
    }
  } catch (error) {
    console.error('获取考试类型详情失败:', error)
    ElMessage.error('获取考试类型详情失败，请稍后重试')
    return null
  }
}


onMounted(() => {
  // 初始化数据
//  fetchLists()
})

const scrollToSection = (sectionId) => {
  // 滚动到对应部分
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.el-carousel{
    height: 100%;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.3), rgba(52, 73, 94, 0.3));
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 70%;
    margin: auto;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* 考试类型 Section */
.exam-types-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.section-header p {
  font-size: 1.1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.exam-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.exam-type-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.exam-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.exam-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-icon img {
  width: 50px;
  height: 50px;
  filter: brightness(0) invert(1);
}

.exam-type-card h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.exam-type-card p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.exam-stats {
  display: flex;
  justify-content: space-around;
  gap: 15px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  color: #409EFF;
}

/* 统计数据 Section */
.stats-section {
  position: relative;
  padding: 80px 0;
  color: white;
  overflow: hidden;
}

.stats-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.stats-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(135deg, rgba(64, 158, 255, 0.9), rgba(103, 194, 58, 0.9));*/
}

.stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon img {
  width: 35px;
  height: 35px;
  filter: brightness(0) invert(1);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-title {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* 特色功能 Section */
.features-section {
  padding: 80px 0;
  background: white;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.feature-card {
  background: #f8f9fa;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-image {
  height: 200px;
  overflow: hidden;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-image img {
  transform: scale(1.05);
}

.feature-content {
  padding: 25px;
}

.feature-content h3 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.feature-content p {
  color: #666;
  line-height: 1.6;
}

/* 成功案例 Section */
.success-stories-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.story-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
  align-items: center;
}

.story-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content {
  flex: 1;
}

.story-content h4 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 5px;
}

.story-position {
  color: #409EFF;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.story-quote {
  color: #666;
  font-style: italic;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
  }
  
  .exam-types-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .stories-grid {
    grid-template-columns: 1fr;
  }
  
  .story-card {
    flex-direction: column;
    text-align: center;
  }
}
</style> 